<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../00.插件/babel.min.js"></script>
  <script src="../00.插件/react.development.js"></script>
  <script src="../00.插件/react-dom.development.js"></script>
</head>
<style>
  .outer{
      width: 300px;
      height: 300px;
      background-color: pink;
  }
</style>
<body>

<div id="app"></div>
<script type="text/babel">
//第一种
//   const vDom = React.createElement("div",{className:'outer'},`React!!!`)

  //第二种
// const vDom = React.createElement("div",{className:'outer'},'React!!!','hello World!!')

//第三种
const vDom = React.createElement("div",{className:'outer'},'React!!!',React.createElement("h1",{},'hello Vue'))


const root =  ReactDOM.createRoot(document.getElementById('app')).render(vDom)
</script>
</body>
</html>